<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            var mainLayer;
            var x = 0;
            var y = 0;
            var people;
            var timer;
            
            var player;
            var playerPX = 8;
            var playerPY = 8;
            
            var target;
            var targetPX = 4;
            var targetPY = 4;

            function movePeople()
            {
                var tempX = x;
                var tempY = y;
                          
                if(x>playerPX  && !isWall((--tempX)+'_'+tempY))
                {
                     getPeople().style.background = "green";
                     x--;
                     getPeople().style.background = "black"; 
                     getTarget().style.background = "yellow";
                }
                if(x<playerPX  && !isWall((++tempX)+'_'+tempY))
                {
                     getPeople().style.background = "green";
                     x++;
                     getPeople().style.background = "black"; 
                     getTarget().style.background = "yellow";
                }
                if(y>playerPY  && !isWall(tempX+'_'+(--tempY)))
                {
                     getPeople().style.background = "green";
                     y--;
                     getPeople().style.background = "black"; 
                     getTarget().style.background = "yellow";
                }
                if(y<playerPY  && !isWall(tempX+'_'+(++tempY)))
                {
                     getPeople().style.background = "green";
                     y++;
                     getPeople().style.background = "black"; 
                     getTarget().style.background = "yellow";
                }                   
                if(x==playerPX && y==playerPY)
                {
                    clearInterval(timer);
                    alert("Get U.......");
                }                    
            }        
                       
            function movePlayer(event) 
            { 
                event = event || window.event; 
                
                var tempX = playerPX;
                var tempY = playerPY;

                if(event.keyCode==37) //左
                { 
                    if(playerPY!=0 && !isWall(tempX+'_'+(--tempY)))
                    {
                          getPlayer().style.background = "green";
                          playerPY--;
                          getPlayer().style.background = "white"; 
                          getTarget().style.background = "yellow";
                    }
                }
                else if(event.keyCode==38) //上
                { 
                    if(playerPX!=0 && !isWall((--tempX)+'_'+tempY))
                    {
                          getPlayer().style.background = "green";
                          playerPX--;
                          getPlayer().style.background = "white"; 
                          getTarget().style.background = "yellow";
                    }
                }
                else if(event.keyCode==39) //右
                { 
                    if(playerPY!=8 && !isWall(tempX+'_'+(++tempY)))
                    {
                          getPlayer().style.background = "green";
                          playerPY++;
                          getPlayer().style.background = "white"; 
                          getTarget().style.background = "yellow";
                    }   
                }
                else if(event.keyCode==40) //下
                { 
                    if(playerPX!=8 && !isWall((++tempX)+'_'+tempY))
                    {
                          getPlayer().style.background = "green";
                          playerPX++;
                          getPlayer().style.background = "white"; 
                          getTarget().style.background = "yellow";
                    }
                }
                if(playerPX==targetPX && playerPY==targetPY)
                {
                    clearInterval(timer);
                    alert("Yeah~~~~~~~");
                }
                    
            }
            
            function getPeople()
            {
                people = document.getElementById(x+'_'+y);
                return people;
            }
            
            function getTarget()
            {
                target = document.getElementById(targetPX+'_'+targetPY);
                return target;
            }
            
            function getPlayer()
            {
                player = document.getElementById(playerPX+'_'+playerPY);
                return player;
            }
            
            function isWall(id)
            {
                var value = document.getElementById(id).value;
                if(value==1)
                {
                    return true;
                }
                else
                {
                    return false;
                }                    
            }      
            
            function drawMap(divElement)
            {
                var mapHTML = '';

                mapHTML += '<table height="500px" border="1"><tbody>';

                for(var i = 0; i < 9; i++)
                {
                    mapHTML += '<tr>';

                    for(var j = 0; j < 9; j++)
                    {
                        var id = i+"_"+j;
                        
                        if(id=='2_5'||id=='3_5'||id=='4_5'||id=='5_5'||id=='6_5')
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 1 width="55px" style="background:red;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else if(id == x + '_' + y)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:black;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else if(id == playerPX + '_' + playerPY)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:white;" onClick="makeMove(this)">&nbsp;</td>';
                        } 
                        else if(id == targetPX + '_' + targetPY)
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:yellow;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                        else
                        {
                            mapHTML += '<td id='+i+'_'+j+' value = 0 width="55px" style="background:green;" onClick="makeMove(this)">&nbsp;</td>';
                        }
                    }                  
                    
                    mapHTML += "</tr>";
                }

                mapHTML += "</tbody></table>"
                divElement.innerHTML = mapHTML;

            }

            function startPeople()
            {
                timer = setInterval(movePeople, 1000);
            }
            
            
        </script>
    </head>
    <body onkeydown="movePlayer(event)">
        <div id="mainLayer"></div>
        <div style="color: blue;" onclick="startPeople()">start move</div>
        <footer>
            <script type="text/javascript">                
                mainLayer = document.getElementById("mainLayer");
                drawMap(mainLayer);                
            </script>
        </footer>
    </body>
</html>
